<template>
  <view class="customer-order-page">
    <!-- 顶部导航栏 -->
    <!-- 客户信息卡片 -->
    <view class="customer-card">
      <view class="card-header">
        <view class="avatar">
          <image src="https://picsum.photos/id/1005/200/200" mode="aspectFill" alt="客户头像"></image>
        </view>
        <view class="customer-info">
          <view class="name-row">
            <text class="name">张三</text>
            <view class="tags">
              <view class="tag tag-vip">VIP客户</view>
              <view class="tag tag-active">活跃</view>
            </view>
          </view>
          <view class="phone">138****5678</view>
          <view class="address">贵阳市南明区花果园购物中心</view>
        </view>
      </view>
      <view class="card-stats">
        <view class="stat-item">
          <text class="stat-value">12</text>
          <text class="stat-label">总报单</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">¥28,640</text>
          <text class="stat-label">总金额</text>
        </view>
        <view class="stat-item">
          <text class="stat-value">3</text>
          <text class="stat-label">待处理</text>
        </view>
      </view>
    </view>
    
    <!-- 快速操作栏 -->
    <view class="quick-actions">
      <view class="action-item" @click="makeCall">
        <text class="action-text">拨打电话</text>
      </view>
      <view class="action-item" @click="sendMessage">
        <text class="action-text">发送消息</text>
      </view>
      <view class="action-item" @click="newOrder">
        <text class="action-text">新增报单</text>
      </view>
      <view class="action-item" @click="editCustomer">
        <text class="action-text">编辑信息</text>
      </view>
    </view>
    
    <!-- 报单记录筛选 -->
    <view class="filter-bar">
      <view class="filter-tabs">
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 'all' }"
          @click="changeTab('all')"
        >
          全部
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 'pending' }"
          @click="changeTab('pending')"
        >
          待处理
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 'completed' }"
          @click="changeTab('completed')"
        >
          已完成
        </view>
        <view 
          class="filter-tab" 
          :class="{ active: currentTab === 'cancelled' }"
          @click="changeTab('cancelled')"
        >
          已取消
        </view>
      </view>
      <view class="date-filter" @click="openDateFilter">
        <text class="date-text">近30天</text>
      </view>
    </view>
    
    <!-- 报单列表 -->
    <view class="order-list">
      <view 
        class="order-item" 
        v-for="(order, index) in filteredOrders" 
        :key="order.id"
        @click="viewOrderDetail(order)"
      >
        <view class="order-header">
          <text class="order-id">订单号: {{ order.orderId }}</text>
          <text class="order-status" >{{ getStatusText(order.status) }}</text>
        </view>
        <view class="order-info">
          <view class="order-date">{{ order.createTime }}</view>
          <view class="order-price">
            <text class="price-value">¥{{ order.totalAmount }}</text>
            <text class="price-text">共{{ order.productCount }}件商品</text>
          </view>
        </view>
        <view class="order-actions">
          <button 
            class="action-btn" 
            v-if="order.status === 'pending'" 
            @click.stop="handleOrder(order)"
          >
            处理订单
          </button>
          <button 
            class="action-btn action-btn-secondary" 
            @click.stop="viewOrderDetail(order)"
          >
            查看详情
          </button>
        </view>
      </view>
      
      <!-- 空状态 -->
      <view v-if="filteredOrders.length === 0" class="empty-state">
        <text class="empty-text">暂无报单记录</text>
        <button class="empty-btn" @click="newOrder">
          <text>创建报单</text>
        </button>
      </view>
    </view>
    
    <!-- 日期筛选弹窗 -->
    <view class="date-filter-mask" v-if="isDateFilterVisible">
      <view class="date-filter-container">
        <view class="filter-header">
          <text class="filter-title">选择时间范围</text>
          <view class="close-filter" @click="closeDateFilter">
          </view>
        </view>
        <view class="filter-options">
          <view 
            class="option-item" 
            v-for="(option, index) in dateOptions" 
            :key="index"
            :class="{ selected: selectedDateOption === index }"
            @click="selectDateOption(index)"
          >
            {{ option.label }}
          </view>
        </view>
        <view class="filter-footer">
          <button class="filter-btn filter-btn-cancel" @click="closeDateFilter">
            取消
          </button>
          <button class="filter-btn filter-btn-confirm" @click="applyDateFilter">
            确定
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      currentTab: 'all',
      selectedDateOption: 0,
      isDateFilterVisible: false,
      dateOptions: [
        { label: '今天', value: 'today' },
        { label: '昨天', value: 'yesterday' },
        { label: '近7天', value: 'last7days' },
        { label: '近30天', value: 'last30days' },
        { label: '本月', value: 'thisMonth' },
        { label: '上月', value: 'lastMonth' },
        { label: '自定义', value: 'custom' }
      ],
      customer: {
        id: 1,
        name: '张三',
        phone: '138****5678',
        address: '贵阳市南明区花果园购物中心',
        vip: true,
        status: 'active',
        totalOrders: 12,
        totalAmount: 28640,
        pendingOrders: 3,
        avatar: 'https://picsum.photos/id/1005/200/200'
      },
      orders: [
        {
          id: 1,
          orderId: 'ORD20230610001',
          createTime: '2023-06-10 14:30',
          status: 'pending',
          totalAmount: 2499,
          productCount: 2,
          products: [
            { name: 'iPhone 14', price: 1999, quantity: 1 },
            { name: 'AirPods Pro', price: 499, quantity: 1 }
          ]
        },
        {
          id: 2,
          orderId: 'ORD20230605002',
          createTime: '2023-06-05 09:15',
          status: 'completed',
          totalAmount: 3999,
          productCount: 1,
          products: [
            { name: 'MacBook Air', price: 3999, quantity: 1 }
          ]
        },
        {
          id: 3,
          orderId: 'ORD20230528003',
          createTime: '2023-05-28 16:45',
          status: 'pending',
          totalAmount: 1299,
          productCount: 1,
          products: [
            { name: 'iPad Air', price: 1299, quantity: 1 }
          ]
        },
        {
          id: 4,
          orderId: 'ORD20230515004',
          createTime: '2023-05-15 11:20',
          status: 'completed',
          totalAmount: 899,
          productCount: 1,
          products: [
            { name: 'Apple Watch SE', price: 899, quantity: 1 }
          ]
        },
        {
          id: 5,
          orderId: 'ORD20230501005',
          createTime: '2023-05-01 18:30',
          status: 'cancelled',
          totalAmount: 5999,
          productCount: 1,
          products: [
            { name: 'iPhone 14 Pro', price: 5999, quantity: 1 }
          ]
        }
      ]
    }
  },
  computed: {
    filteredOrders() {
      return this.orders.filter(order => {
        if (this.currentTab === 'all') return true;
        if (this.currentTab === 'pending') return order.status === 'pending';
        if (this.currentTab === 'completed') return order.status === 'completed';
        if (this.currentTab === 'cancelled') return order.status === 'cancelled';
        return true;
      });
    }
  },
  methods: {
    goBack() {
      uni.navigateBack();
    },
    openSearch() {
      uni.showToast({ title: '搜索功能', icon: 'none' });
    },
    makeCall() {
      uni.makePhoneCall({
        phoneNumber: this.customer.phone.replace(/\*/g, '')
      });
    },
    sendMessage() {
      uni.showToast({ title: '发送消息', icon: 'none' });
    },
    newOrder() {
      uni.showToast({ title: '创建新报单', icon: 'none' });
    },
    editCustomer() {
      uni.showToast({ title: '编辑客户信息', icon: 'none' });
    },
    changeTab(tab) {
      this.currentTab = tab;
    },
    openDateFilter() {
      this.isDateFilterVisible = true;
    },
    closeDateFilter() {
      this.isDateFilterVisible = false;
    },
    selectDateOption(index) {
      this.selectedDateOption = index;
    },
    applyDateFilter() {
      uni.showToast({ 
        title: `已选择${this.dateOptions[this.selectedDateOption].label}`, 
        icon: 'none' 
      });
      this.isDateFilterVisible = false;
    },
    viewOrderDetail(order) {
      uni.showModal({
        title: '订单详情',
        content: `订单号: ${order.orderId}\n时间: ${order.createTime}\n金额: ¥${order.totalAmount}\n商品数量: ${order.productCount}`,
        showCancel: false
      });
    },
    handleOrder(order) {
      uni.showModal({
        title: '处理订单',
        content: `确定要处理订单 ${order.orderId} 吗？`,
        success: (res) => {
          if (res.confirm) {
            uni.showToast({ title: '开始处理订单', icon: 'success' });
            // 模拟处理订单的逻辑
            setTimeout(() => {
              const index = this.orders.findIndex(o => o.id === order.id);
              if (index !== -1) {
                this.orders[index].status = 'completed';
              }
            }, 1000);
          }
        }
      });
    },
    getStatusText(status) {
      const statusMap = {
        'pending': '待处理',
        'completed': '已完成',
        'cancelled': '已取消'
      };
      return statusMap[status] || status;
    },
    getStatusClass(status) {
      const classMap = {
        'pending': 'status-pending',
        'completed': 'status-completed',
        'cancelled': 'status-cancelled'
      };
      return classMap[status] || '';
    }
  }
}
</script>

<style scoped lang="scss">
@import "@/uni_modules/uview-ui/index.scss";

.customer-order-page {
  background-color: #f6f7fb;
  min-height: 100vh;
}

/* 导航栏 */
.nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88rpx;
  padding: 0 30rpx;
  background: linear-gradient(135deg, #3498db, #2980b9);
  color: #fff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
}
.back-btn, .right-btn {
  width: 40rpx;
  height: 40rpx;
}
.title {
  font-size: 36rpx;
  font-weight: 500;
}

/* 客户信息卡片 */
.customer-card {
  background-color: #fff;
  border-radius: 24rpx;
  margin: 24rpx;
  padding: 30rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
}
.card-header {
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}
.avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 24rpx;
}
.avatar image {
  width: 100%;
  height: 100%;
}
.customer-info {
  flex: 1;
}
.name-row {
  display: flex;
  align-items: center;
  margin-bottom: 12rpx;
}
.name {
  font-size: 32rpx;
  font-weight: 500;
  margin-right: 16rpx;
}
.tags {
  display: flex;
  align-items: center;
}
.tag {
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  margin-right: 10rpx;
}
.tag-vip {
  background-color: #f39c12;
  color: #fff;
}
.tag-active {
  background-color: #2ecc71;
  color: #fff;
}
.phone, .address {
  font-size: 26rpx;
  color: #7f8c8d;
  margin-bottom: 8rpx;
}
.card-stats {
  display: flex;
  justify-content: space-between;
  border-top: 1rpx solid #eee;
  padding-top: 24rpx;
}
.stat-item {
  flex: 1;
  text-align: center;
}
.stat-value {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  display: block;
  margin-bottom: 8rpx;
}
.stat-label {
  font-size: 24rpx;
  color: #7f8c8d;
}

/* 快速操作栏 */
.quick-actions {
  display: flex;
  justify-content: space-between;
  padding: 0 24rpx;
  margin-bottom: 24rpx;
}
.action-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #fff;
  padding: 24rpx 0;
  border-radius: 16rpx;
  margin: 0 8rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  transition: transform 0.2s;
}
.action-item:active {
  transform: scale(0.96);
}
.action-text {
  margin-top: 12rpx;
  font-size: 26rpx;
  color: #333;
}

/* 筛选栏 */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 24rpx;
  background-color: #fff;
  margin-bottom: 24rpx;
}
.filter-tabs {
  display: flex;
  flex: 1;
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}
.filter-tab {
  display: inline-block;
  padding: 12rpx 24rpx;
  font-size: 28rpx;
  color: #7f8c8d;
  margin-right: 20rpx;
  border-radius: 30rpx;
  transition: all 0.2s;
}
.filter-tab.active {
  background-color: #3498db;
  color: #fff;
}
.date-filter {
  display: flex;
  align-items: center;
  padding: 12rpx 20rpx;
  background-color: #f5f7fa;
  border-radius: 30rpx;
  font-size: 26rpx;
  color: #7f8c8d;
}
.date-text {
  margin: 0 10rpx;
}

/* 报单列表 */
.order-list {
  padding: 0 24rpx;
}
.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
.order-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}
.order-id {
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
}
.order-status {
  padding: 4rpx 16rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
}
.status-pending {
  background-color: #f39c12;
  color: #fff;
}
.status-completed {
  background-color: #2ecc71;
  color: #fff;
}
.status-cancelled {
  background-color: #e74c3c;
  color: #fff;
}
.order-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20rpx;
}
.order-date {
  font-size: 26rpx;
  color: #7f8c8d;
}
.order-price {
  text-align: right;
}
.price-value {
  font-size: 32rpx;
  font-weight: 500;
  color: #e67e22;
  display: block;
}
.price-text {
  font-size: 24rpx;
  color: #7f8c8d;
}
.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16rpx;
}
.action-btn {
  padding: 12rpx 24rpx;
  border-radius: 10rpx;
  font-size: 26rpx;
  border: none;
}
.action-btn {
  background-color: #3498db;
  color: #fff;
}
.action-btn-secondary {
  background-color: #f5f7fa;
  color: #7f8c8d;
}

/* 空状态 */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
}
.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-top: 20rpx;
  margin-bottom: 30rpx;
}
.empty-btn {
  display: flex;
  align-items: center;
  background-color: #3498db;
  color: #fff;
  padding: 16rpx 32rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
}
.empty-btn text {
  margin-left: 10rpx;
}

/* 日期筛选弹窗 */
.date-filter-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1100;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.date-filter-container {
  background-color: #fff;
  border-top-left-radius: 24rpx;
  border-top-right-radius: 24rpx;
  max-height: 70vh;
  overflow-y: auto;
  animation: selectFadeIn 0.3s ease-out;
}
@keyframes selectFadeIn {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}
.filter-title {
  font-size: 32rpx;
  font-weight: 500;
  color: #333;
}
.close-filter {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.filter-options {
  padding: 20rpx 0;
}
.option-item {
  padding: 28rpx 30rpx;
  font-size: 30rpx;
  color: #333;
  border-bottom: 1rpx solid #f5f5f5;
}
.option-item.selected {
  color: #3498db;
  background-color: #f5f7fa;
  position: relative;
}
.option-item.selected::after {
  content: '';
  position: absolute;
  right: 30rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 36rpx;
  height: 36rpx;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M82.1 25.3c-2.2-2.2-5.8-2.2-8 0L40.9 64.1 25.9 49.1c-2.2-2.2-5.8-2.2-8 0s-2.2 5.8 0 8l19 19c1.1 1.1 2.6 1.6 4 1.6s2.9-.5 4-1.6l41-41c2.2-2.2 2.2-5.8 0-8z' fill='%233498db'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}
.filter-footer {
  display: flex;
  border-top: 1rpx solid #eee;
}
.filter-btn {
  flex: 1;
  height: 96rpx;
  line-height: 96rpx;
  font-size: 32rpx;
  border: none;
}
.filter-btn-cancel {
  color: #7f8c8d;
  background-color: #fff;
  border-right: 1rpx solid #eee;
}
.filter-btn-confirm {
  color: #fff;
  background-color: #3498db;
}
</style>
